<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>现金流量表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes">
		<!--<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">-->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui/mui.min.css" />
        <link rel="stylesheet" href="../../../js/libs/css/layui.css" media="all">
        <link rel="stylesheet" href="../../../css/app.css" />
        <link rel="stylesheet" href="../../../css/table.css" />
		<link href="../../../css/mui/mui.poppicker.css" rel="stylesheet" />
		<link href="../../../css/mui/mui.picker.min.css" rel="stylesheet" type="text/css"/>
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}

			.mui-pages {
				top: 46px;
				height: auto;
			}

			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}

			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}

			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}

			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}

			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}

			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}

			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}

			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}

			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}

			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}

			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}

			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}

			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}

			.mui-page {
				display: none;
			}

			.mui-pages .mui-page {
				display: block;
			}

			.head {
				height: 40px;
			}

			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}

			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			.mySpan{
				width: 20%;
				float: left;
				text-align: left;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before {
				font-family: Muiicons;
				font-size: 25px;
				font-weight: 15px;
				line-height: 1.42857143;
				text-decoration: none;
				color: #000000;
				border-radius: 0;
				background: 0 0;
				-webkit-font-smoothing: antialiased;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
				color: #FF0000;
			}
			th{
				font-weight: bold;
			}

		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="mainPage" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">现金流量表</h1>
				<button type="button" class="mui-right mui-btn-link mui-btn-nav mui-pull-right">
					<a id="selector" class="mui-icon mui-icon-search mui-pull-right color-blue" href="#"></a>
				</button>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
                <div class="head-search">
                    <div class="search-res">
                        <span class="mySpan">统计日期:</span>
                        <span id="beginDate"></span>
                        <span>~</span>
                        <span id="endDate"></span>
                    </div>
                    <div class="search-res">
                        <span class="mySpan">主体单元:</span>
                        <div id="subjectStock" style="width: 80%;float: right;overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space:nowrap;"></div>
                    </div>
                </div>
                <div id="table">
                    <table class="am-table am-table-bordered am-table-striped am-text-nowrap table-bordered">
                        <thead>
                            <tr class="no-data">
                            <th>暂无数据!</th>
                            </tr>
                        </thead>
                    </table>
                </div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<!--查询主页面开始-->
		<div id="selectorPage" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">查询条件</h1>
				<button id="confirmBtn" type="button" class="mui-right mui-btn-link mui-btn-nav mui-pull-right" >
					<a class="mui-icon mui-icon-checkmarkempty mui-pull-right color-blue"></a>
				</button>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li id="selectorBeginDate" class="mui-table-view-cell myPicker">
								<span class="mySpan">开始日期:</span>
								<span id="selectorBeginDateShow"></span>
							</li>
							<li id="selectorEndDate" class="mui-table-view-cell myPicker">
								<span class="mySpan">结束日期:</span>
								<span id="selectorEndDateShow"></span>
							</li>
							<li class="mui-table-view-cell">
								<a id="selectorStock" href="#selectorStockPage" class="mui-navigate-right">
									<span class="mySpan">主体单元:</span>
									<span id="selectorSubjectStockShow"></span>
								</a>
							</li>
						</ul>
						<div style="height: 5px; width: 100%;background-color: #EFEFF4;"></div>
						<table id="subjectStockTable" class="table table-bordered"></table>
					</div>
				</div>
			</div>
		</div>
		<!--查询主页面结束-->
		<!--查询   主体单元页面开始-->
		<div id="selectorStockPage" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">选择主体单元</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li id="selectorCategory" class="mui-table-view-cell myPicker">
								<span class="mySpan">分类:</span>
								<span id="selectorCategoryShow"></span>
							</li>
							<li id="selectorOutOrInside" class="mui-table-view-cell myPicker">
								<span class="mySpan">内外:</span>
								<span id="selectorOutOrInsideShow"></span>
							</li>
							<li id="selectorIsEmployee" class="mui-table-view-cell myPicker">
								<span class="mySpan">员工:</span>
								<span id="selectorIsEmployeeShow"></span>
							</li>
							<li class="mui-table-view-cell" style="height: 48px;">
								<span class="mySpan">主体:</span>
								<input class="mui-pull-left commom_fontsize" id="selectorSubjectShow" type="text" style="width:75%;border: 0px;height: 25px;"></input>
							</li>
							<li class="mui-table-view-cell" style="height: 48px;">
								<span class="mySpan">单元:</span>
								<input class="mui-pull-left commom_fontsize" id="selectorStockShow" type="text" style="width:75%;border: 0px;height: 25px;"></input>
							</li>
						</ul>
						<div class="mui-content-padded" align="center">
							<button type="button" class="mui-btn mui-btn-blue " style="margin-right: 20px;" id="selectorBtnOK">确定</button>
							<button type="button" class="mui-btn mui-btn-green " id="selectorBtnCancel">清空</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--查询   主体单元页面结束-->
	</body>
	<script src="../../../js/mui/mui.min.js"></script>
	<script src="../../../js/mui/mui.view.js"></script>
    <script src="../../../js/libs/art-template.js"></script>
    <script src="../../../js/libs/layui.js"></script>
	<script type="text/javascript" src="../../../js/libs/jquery.min.js" ></script>
	<script type="text/javascript" src="../../../js/comprehensive.js" ></script>
	<script type="text/javascript" src="../../../js/mui/mui.picker.js" ></script>
	<script type="text/javascript" src="../../../js/mui/mui.dtpicker.js" ></script>
	<script type="text/javascript" src="../../../js/mui/mui.poppicker.js" ></script>
	<script type="text/javascript" src="../../../js/YrTable.js" ></script>
	<script type="text/javascript" src="../../../js/YrDate.js" ></script>
    <!--自己的js-->
    <script src="../../../js/common.js"></script>
    <script src="../../../js/utils/index.js"></script>
    <script type="text/javascript" src="../reportCommon.js"></script>

	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#mainPage'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);

		//获取现金流量表数据
		function createmainTable(beginDate,endDate,wareIDs,subjectStocks){
			$("#beginDate").html(beginDate);
			$("#endDate").html(endDate);
			$("#subjectStock").html(subjectStocks);
//			$('.no-data').html('<span class="mui-spinner"></span>')
            $('#table').html("");
			layui.use('table', function(){
				var table = layui.table;

				//第一个实例
				table.render({
					elem: '#table'
                    ,limit: 10000
                    ,height: $(window).height() - $('.head-search').height() - 60
					,url: url1 + Utils.Api.rptXJLLBGet //数据接口
					,where: {
						accessid: window.localStorage.accessid || '',
						qryDateB: beginDate,
						qryDateE: endDate,
						qryWareIds: wareIDs,
					}
					,response: {
						statusName: 'hasError', //数据状态的字段名称，默认：code
						statusCode: false, //成功的状态码，默认：0
						msgName: 'error', //状态信息的字段名称，默认：msg
						countName: 'results', //数据总数的字段名称，默认：count
						dataName: 'rows' //数据列表的字段名称，默认：data
					}
					,page: false //开启分页
					,cols: [[ //表头
						{field: 'kmName', title: '项目名称', width: 140, align: 'center',templet: function(d){
							return  d.kmFontBold === 0? d.kmName: '<span class="font-bold">' +d.kmName+'</span>'
						}}
						,{field: 'kmAmtBQ', title: '本期金额', align: 'right',templet: function(d){
							return  d.kmFontBold === 0? Utils.formatMoney(d.kmAmtBQ): '<span class="font-bold">' +Utils.formatMoney(d.kmAmtBQ)+'</span>'
						}}
						,{field: 'kmAmtQM', title: '本年金额', align: 'right',templet: function(d){
							return d.kmFontBold === 0? Utils.formatMoney(d.kmAmtQM):'<span class="font-bold">' +Utils.formatMoney(d.kmAmtQM)+'</span>'
						}}
						//,{field: 'kmAmtQC', title: '期初金额', width: 80, align: 'right',templet: function(d){
//							return  d.kmAmtQC.toFixed(2)
//						}}
//						,{field: 'kmRemark', title: '备注说明', width: 200,align: 'center'}
					]]
				});

			});

//			Utils.request(Utils.Api.rptXJLLBGet, {
//				qryDateB: beginDate,
//				qryDateE: endDate,
//				qryWareIds: wareIDs,
//			}, function(data){
//				$('#table').html(template('tableTem', data.rows));
//			})
		}
	</script>

</html>